<template>
  <div class="dashboard-container">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>所有文章统计</span>
      </div>
      <div class="text item">
        <ve-line :data="articleStatisticalChart" :settings="articleStatisticalSetting"></ve-line>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人文章统计</span>
      </div>
      <div class="text item">
        <ve-line :data="articleStatisticalChartByUsername" :settings="articleStatisticalSetting"></ve-line>
      </div>
    </el-card>

  </div>
</template>

<script>
  import VeLine from "v-charts/lib/line.common";
  import 'v-charts/lib/style.css'

  import { mapGetters } from 'vuex'
import { getArticleStatistical, getArticleStatisticalByUsername} from '@/api/echarts'

export default {
  name: 'Dashboard',
  data() {
    return{
      articleStatisticalSetting:{
        labelMap:{
          createTime: '时间',
          likes: '喜欢',
          look: '浏览',
          count:'总量'
        }
      },
      articleStatisticalChart: {
        columns:['createTime','likes','look','count'],
        rows:[]
      },
      articleStatisticalChartByUsername: {
        columns:['createTime','likes','look','count'],
        rows:[]
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
    ])
  },
  mounted() {
    this.getArticleStatistical()

    this.getArticleStatisticalByUsername()
  },
  methods:{
    /**
     * 获取所有文章统计
     */
    getArticleStatistical(){
      // api获取
      getArticleStatistical().then(response => {

        if (response.code == 200) {
          const { data } = response

          this.articleStatisticalChart.rows = data
        }

      }).catch(error => {
        console.log(error)
      })
    },

    /**
     * 获取个人文章统计
     */
    getArticleStatisticalByUsername(){
      // api获取
      getArticleStatisticalByUsername(this.name).then(response => {

        if (response.code == 200) {
          const { data } = response

          this.articleStatisticalChartByUsername.rows = data
        }

      }).catch(error => {
        console.log(error)
      })
    }
  },
  components: { VeLine }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style>
  //卡片样式
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .desc{
    display: block;
    margin: 10px ;
    line-height: 30px;
    letter-spacing:2px
  }

  .clearfix {
    text-align: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 20px 0;
    width: 100%;
  }

  //文本样式区
  .name-role {
    font-size: 16px;
    padding: 5px;
    text-align: center;
  }

  .sender {
    text-align: center;
  }

  .registe-info {
    text-align: center;
    padding-top: 10px;
  }

  .personal-relation {
    font-size: 16px;
    padding: 0px 5px 15px;
    margin-right: 1px;
    width: 100%
  }

  .relation-item {
    padding: 12px;

  }

  .dialog-footer {
    padding-top: 10px;
    padding-left: 10%;
  }

  //布局样式区
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: auto;
    width: 100%;
  }
</style>
